﻿/// <reference path="../../lib/sencha-touch-debug-w-comments.js" />

app.views.RestaurantDetail = Ext.extend(Ext.form.FormPanel, {
    id: 'app.views.RestaurantDetail',
    store: restaurantStore,
    scroll: 'vertical',
    title: 'Restaurant',
    dockedItems: [{
        id: 'detailToolbar',
        xtype: 'toolbar',
        dock: 'top',
        title: 'RestaurantTitle',
        items: [{
            id: 'backButton',
            html: 'Back',
            ui: 'back',
            handler: function () {
                Ext.dispatch({
                    controller: app.controllers.navigation,
                    action: 'backToRankings'
                });
            }
        }]
    }
    ],
    items: [
        {
            id: 'detailsPanel1',
            xtype: 'panel'
        },
        {
            id: 'detailsPanel2',
            xtype: 'panel'
        }
    ],
    initComponent: function () {
        this.panel1 = new Ext.Panel({
            id: 'detailsPanel1'
        });
        this.starRating = new Ext.ux.touch.Rating({
            itemsCount: 5,
            style: {
                'width': '100%',
                'text-align':'center'
            },
            inputCls: 'x-rating-star-input',
            itemCls: 'x-rating-star',
            itemHoverCls: 'x-rating-star-hover'
        });
        this.panel2 = new Ext.Panel({
            id: 'detailsPanel2'
        });
        this.items = [this.panel1, this.starRating ];
        app.views.RestaurantDetail.superclass.initComponent.call(this); // Must go at the end of initComponent. 
    },
    loadData: function (data) {
        Ext.getCmp("detailsPanel1").update("<div style='font-size:15px;text-shadow:1px 1px 0px #FFFFFF;filter:dropshadow(color=#FFFFFF, offx=1, offy=1)' class='detailsContainer'>" +
                "<img style='margin:0 10px 0 0' src='" + data.restaurant.get("IMAGE_LOCATION") + "'/>" +
                "<p style='font-size:18px;margin-top:10px'>Address</p><p>" + data.restaurant.get("STREET_ADDRESS1") + "</p><p>" + data.restaurant.get("STREET_ADDRESS2") + "</p>" +
                "<p>" + data.restaurant.get("CITY") + ", " + data.restaurant.get("STATE") + ", " + data.restaurant.get("ZIP") +
                "<p style='font-size:18px;margin-top:10px'>Distance: " + data.distance + " miles</p>" +
                "<p style='font-size:18px;margin-top:10px'>Leave at " + data.leaveTime + "</p>" +
                "</div>");

    }
});